<div class="panel panel-default" ng-repeat="category in categories">
    <div class="panel-heading">
        <div class="pull-right">
            <a href="" class="btn btn-default btn-xs" ui-sref="^.add({ categoryId: category.id })"
               title="{{ 'Add product to category' | translate }}"><i class="fa fa-plus-circle"></i></a>
            <a href="" class="btn btn-default btn-xs" ui-sref="^.editcategory({ categoryId: category.id })"
               title="{{ 'Edit category' | translate }}"><i class="fa fa-pencil"></i></a>
            <a href="" class="btn btn-default btn-xs" ng-click="deletecategory({ id: category.id })"
               title="{{ 'Delete category' | translate }}"><i class="fa fa-trash-o"></i></a>
        </div>
        <h3 class="panel-title">{{ category.name }}</h3>
    </div>
    <table class="table table-bordered" ng-show="category.products.length">
        <tbody>
        <tr ng-repeat="item in category.products">
            <th>
                <a href="" ui-sref="^.view({id: item.id})">{{item.name}}</a>
                <small>{{item.description}}</small>
                <div class="pull-right">
                    <span class="label label-default">{{item.price}}</span>
                    <a href="" class="btn btn-xs btn-default" ui-sref="^.edit({id: item.id})">
                        <i class="fa fa-pencil"></i>
                    </a>
                    <a href="" class="btn btn-xs btn-default" ng-click="delete({id: item.id})">
                        <i class="fa fa-trash-o"></i>
                    </a>
                </div>
            </th>
        </tr>
        </tbody>
    </table>
    <div class="panel-body" ng-show="!category.products.length">
        <h4 class="list-group-item-heading" translate>
          There are no products in this category!
        </h4>
        <p class="list-group-item-text" translate>Click <a href="" ui-sref="^.add({ categoryId: category.id })">here</a> to add a product!</p>
    </div>
</div>
